<script setup lang="ts">


import type {LoginType, Result} from "@/types/data.ts";
import {onMounted, ref} from "vue";
import {UserLogin} from "@/api/user.ts";
import {CheckOutSearchBy, CheckOutUpdateById} from "@/api/checkout.ts";
import type {Checkout} from "@/types/checkout.ts";
import {DefaultCheckout} from "@/types/checkout.ts";
import {ElPagination, ElTable} from "element-plus";
import type {PageInfo, PageResult} from "@/types/searcher.ts"; //
import {DefaultPageInfo} from "@/types/searcher.ts"; //

const loginInfo = ref<LoginType>({
    username: '',
    password: ''
})
const CheckOutResult = ref<PageResult<Checkout>>({items: [], total: 0})

const ToLogin = () => {
    UserLogin(loginInfo.value).then(resp => {

        // 响应
        // resp.config
        // resp.headers
        // re sp.status
        // any --> Result
        let data = resp.data as Result<any>;
        console.log(data)
    })
    console.log(loginInfo.value)
}
const ReqPageInfo = ref<PageInfo>(DefaultPageInfo)
const ToCheckOutSearchBy = () => {
    // CheckOutSearchById({id: 1}).then(resp => {
    //     let data = resp.data as Result<Checkout>;
    //     if (data.code == 200) {
    //         CheckOutResult.value = data.data;
    //         CheckOutResultList.value.push(data.data)
    //     }
    // })
    CheckOutSearchBy({
        pageInfo: ReqPageInfo.value,
        data: {
            ...DefaultCheckout, // 解构
            project_name: "",
        }
    }).then(resp => {
        let data = resp.data as Result<PageResult<Checkout>>;
        if (data.code == 200) {
            // CheckOutResult.value = data.data
            CheckOutResult.value = data.data
            console.log(CheckOutResult.value)
        }
    })
}
const handleClick = (index: number, row: Checkout) => {
    console.log(index, row)
}
const Edit = (index: number, row: Checkout) => {
    // console.log(index, row)
    CheckOutUpdateById(row).then(resp => {
        let data = resp.data as Result<any>;
        if (data.code == 200) {
            alert("success")
        }
    })
}

const Update = (index: number, row: Checkout) => {
    console.log(index, row)
}

//============


onMounted(() => {
    ToCheckOutSearchBy()
})


</script>

<template>

<h1>ad</h1>
<input type="text" v-model="loginInfo.username">
<input type="password" v-model="loginInfo.password">
<button @click="ToLogin">ToLogin</button>
<button @click="ToCheckOutSearchBy">ToCheckOutLogin</button>

<el-table :data="CheckOutResult.items" stripe style="width: 100%">
    <el-table-column prop="id" label="id"/>
    <el-table-column prop="amount" label="amount"/>
    <el-table-column prop="category" label="category"/>
    <el-table-column prop="checkout_id" label="checkout_id"/>
    <el-table-column prop="consume_number" label="consume_number"/>
    <el-table-column prop="employee_name" label="employee_name"/>
    <el-table-column prop="project_name" label="project_name"/>
    <el-table-column prop="project_number" label="project_number"/>
    <el-table-column prop="consume_number" label="consume_number"/>
    <el-table-column fixed="right" label="Operations" width="120">
        <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.$index,scope.row)">Detail</el-button>
            <el-button link type="primary" size="small" @click="Edit(scope.$index,scope.row)">Edit</el-button>
        </template>
    </el-table-column>
</el-table>

<el-pagination
    layout="prev, pager, next"
    :page-size="ReqPageInfo.pageSize"
    :page-sizes="[5,10, 20, 30, 40, 50, 100]"
    :total="CheckOutResult.total"/>
</template>

<style scoped>

</style>